
<template>
    <div class="calendar">
        <div class="time">{{time}}</div>
        <div class="date">
            <div class="week">{{ week }}</div>
            <div class="value">{{ date }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'


const time=ref('')
const date=ref('')
const week=ref('')
date.value=dayjs().locale("zh-cn").format('YYYY-MM-DD') 
week.value=dayjs().locale("zh-cn").format('dddd') 
function updateClock() {
  const now = new Date(); // 获取当前时间
  const hours = now.getHours(); // 小时
  const minutes = now.getMinutes(); // 分钟
  const seconds = now.getSeconds(); // 秒
 
  // 将时间格式化为两位数字
  function formatDigits(digit) {
    return digit < 10 ? '0' + digit : digit;
  }
 
  time.value = `${formatDigits(hours)}:${formatDigits(minutes)}:${formatDigits(seconds)}`;
}
updateClock()
const timer= setInterval(updateClock, 1000); // 每秒更新时钟
</script>

<style lang="scss" scoped>

.calendar{
    display: flex;
    flex-direction: row;
    
    align-items: center;
    gap: 8px;

    .time{
        font-size: 22px;
        font-weight: 400;
       
    }
    .date{
        display: flex;
        flex-direction: column;
        font-size: 12px;
    }
}


</style>